<template>
<div>
    <el-card shadow="always" class="el-card-register">
        <span class="title">
            <h1>注册界面</h1>
        </span>
        <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
            <el-col :span="20">
            <el-input v-model="form.username" :rules="rules" autocomplete="off"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
            <el-col :span="20">
            <el-input type="password" v-model="form.password" :rules="rules" autocomplete="off"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-col :span="20">
            <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
            </el-col>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
            <el-col :span="20">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;" value-format="yyyy-MM--dd"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="学校" prop="school">
            <el-col :span="10">
            <el-select v-model="form.school" placeholder="请选择学校">
                <el-option label="广州商学院" value="广州商学院"></el-option>
            </el-select>
            </el-col>
        </el-form-item>
        <el-form-item label="所属学院" prop="college">
            <el-col :span="20">
            <el-input type="textword" v-model="form.college" :rules="rules" autocomplete="off"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="学号" prop="studentNumber">
            <el-col :span="20">
                <el-input v-model="form.studentNumber"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item class="btn">
            <el-button type="primary" @click="register">立即注册</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        sex: '',
        birthday: '',
        school: '',
        college: '',
        studentNumber: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '请输入长度 3-10 的名字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 8, max: 20, message: '请输入长度 8-20 的字符串', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '请填写出生日期', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '请填写学校信息', trigger: 'blur' }
        ],
        college: [
          { required: true, message: '请填写学院信息', trigger: 'blur' }
        ],
        studentNumber: [
          { required: true, message: '请填写学号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    register () {
      var username = this.form.username
      var password = this.form.password
      var sex = this.form.sex
      var birthday = this.form.birthday
      var school = this.form.school
      var college = this.form.college
      var studentNumber = this.form.studentNumber
      this.$http.post('/api/user/addUser', {
        username: username,
        password: password,
        sex: sex,
        birthday: birthday,
        school: school,
        college: college,
        studentNumber: studentNumber
      }, {}).then((response) => {
        console.log(response)
        if (response.username === '' ||
            response.password === '') {
          window.alert('账号或密码错误！')
        } else {
          window.alert('注册成功！')
          sessionStorage.setItem('username', this.username)
          this.$emit('addUser', 1)
          this.$router.push('/login')
        }
      })
    },
    cancel () {
      this.$router.push('/login')
    }
  }
}
</script>

<style>
.el-card-register{
    text-align: left;
    margin: 20px auto;
    width: 50%;
}
.title {
    text-align: center;
}
.btn{
    margin: 20px auto;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
    .el-card-register {
    /* background: red; */
    width: 100%;
    margin: 0px auto;
    }
}
/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
    .el-card-register {
    /* background: green; */
    width: 100%;
    margin: 0px auto;
    }
}
/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
    .el-card-register {
    width: 50%;
    margin: 20px auto;
    }
}
</style>
